<template>
  <div>
    <el-dialog
      v-el-drag-dialog
      title="订单详情"
      :visible.sync="visible"
      width="1024px"
    >
      <!-- 左右布局 -->
      <div class="center">
        <!-- 左侧 -->
        <div class="left">
          <!-- 描述列表1 -->
          <el-descriptions size="medium" style="margin-top: 20px;">
            <el-descriptions-item label="订单编号">kooriookami</el-descriptions-item>
            <el-descriptions-item label="下单时间">21-06-06 09：30</el-descriptions-item>
            <el-descriptions-item label="责任机构">xxx</el-descriptions-item>
            <el-descriptions-item label="处理人">xxx</el-descriptions-item>
            <el-descriptions-item label="支付方式">现金</el-descriptions-item>
            <el-descriptions-item label="支付状态">已支付</el-descriptions-item>
            <el-descriptions-item label="客户编号">001</el-descriptions-item>
            <el-descriptions-item label="客户名称">包子铺</el-descriptions-item>
          </el-descriptions>
          <el-descriptions size="medium" style="margin-top: -20px; margin-bottom: 50px;">
            <el-descriptions-item label="客户地址">湖北省武汉市洪山区湖北武汉(楼层:2)</el-descriptions-item>
          </el-descriptions>
          <div class="doneImg" />
          <!-- 表格 -->
          <lb-table
            ref="lbTable"
            border
            highlight-current-row
            element-loading-text="加载中"
            :column="tableData.column"
            :data="tableData.data"
            :total="tableData.total"
            custom-column
            align="center"
          />
          <!-- 描述列表2 -->
          <el-descriptions size="medium" style="margin-top: 30px; margin-bottom: 50px;">
            <el-descriptions-item label="商品总额">220.00</el-descriptions-item>
            <el-descriptions-item label="配送费">16</el-descriptions-item>
            <el-descriptions-item label="上楼费">16</el-descriptions-item>
            <el-descriptions-item label="服务费">16</el-descriptions-item>
            <el-descriptions-item label="优惠金额">16</el-descriptions-item>
          </el-descriptions>
          <!--  -->
          <div class="settlement">
            <span style="margin-right: 40px;">应收金额：220.00</span>
            <span>实收金额：220.00</span>
          </div>
        </div>
        <!-- 右侧 -->
        <div class="right">
          <span>流转信息：</span>
          <el-timeline>
            <el-timeline-item timestamp="2018/4/12 12:00:05" placement="top">
              <el-card>
                <h4>更新 Github 模板</h4>
                <p>王小虎 提交于 2018/4/12 20:46</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2018/4/3 10:00:05" placement="top">
              <el-card>
                <h4>更新 Github 模板</h4>
                <p>王小虎 提交于 2018/4/3 20:46</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2018/4/2 09:00:05" placement="top">
              <el-card>
                <h4>更新 Github 模板</h4>
                <p>王小虎 提交于 2018/4/2 20:46</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
      <!-- 底部 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false"> 关闭 </el-button>
        <!-- <el-button type="primary" @click="openRedeploy"> 转派 </el-button> -->
        <el-button type="primary" @click="dialogFormVisible = true">转派</el-button>
        <el-button type="primary"> 催单 </el-button>
        <el-button type="primary"> 签单 </el-button>
        <el-button type="primary"> 退货 </el-button>
      </div>
    </el-dialog></div>
</template>

<script>
  export default {
    name: 'OrderDetails',
    data() {
      return {
        visible: false,
        orderCode: '', // 订单号
        tableData: {
          total: 0,
          column: [
            {
              prop: 'productName',
              label: '商品名称',
              width: 150
            },
            {
              prop: 'specification',
              label: '规格'
              // width: 110
            },
            {
              prop: 'quantity',
              label: '数量',
              width: 150
            },
            {
              prop: 'univalence',
              label: '单价',
              width: 150
            }
          ],
          options01: [{
            value: '选项1',
            label: '黄金糕'
          }, {
            value: '选项2',
            label: '双皮奶'
          }, {
            value: '选项3',
            label: '蚵仔煎'
          }, {
            value: '选项4',
            label: '龙须面'
          }, {
            value: '选项5',
            label: '北京烤鸭'
          }],
          data: [{
            productName: '15KG液化气',
            specification: '12KG',
            quantity: 1,
            univalence: 120
          }, {
            productName: '15KG液化气',
            specification: '12KG',
            quantity: 1,
            univalence: 120
          }]
        }
      }
    },
    methods: {
      open(temp) {
        return new Promise((resolve) => {
          this.resolve = resolve
          this.visible = true
          if (temp) {
            this.orderCode = temp
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.center {
  display: flex;
  height: 500px;
  font-size: 14px;
  font-weight: 400;
  color: #333;
  text-align: left;

  .left {
    position: relative;
    width: 600px;
    height: 100%;

    .doneImg {
      position: absolute;
      top: 80px;
      right: 80px;
      width: 61px;
      height: 61px;
      background-image: url("../../../../assets/done2.png");
      background-size: 61px 61px;
    }

    .settlement {
      font-size: 16px;
      font-weight: 700;
      color: #F54D28;
    }

    .el-table {
      margin-bottom: 20px;
    }

    .el-descriptions {
      margin-bottom: 20px;
    }

    img {
      width: 61px;
      height: 61px;
      margin-left: 80px;
      // background-image: url("../../../../assets/done2.png");
    }
  }

  .right {
    width: 400px;
    height: 100%;
    margin-left: 15px;

    span {
      display: block;
      height: 24px;
      padding-left: 20px;
      font-weight: 700;
      line-height: 24px;
      background-color: #e3e3e3;
    }

    .el-timeline {
      margin-top: 20px;
    }
  }
}
</style>
